$border-radius: 5px;

.x-hds-tab {
  &--link,
  &--button {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--token-color-foreground-primary);
    border-radius: $border-radius;
    background: transparent;
    border: none;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      background: var(--token-color-palette-neutral-100);
    }

    &:active {
      color: var(--token-color-foreground-strong);
      background: var(--token-color-palette-neutral-200);
    }

    &:focus {
      outline: none;
      box-shadow: var(--token-focus-ring-action-box-shadow);
    }

    * ~ * {
      margin-left: 6px;
    }
  }

  &--selected {
    a,
    button {
      color: var(--token-color-foreground-strong);
      background: var(--token-color-palette-neutral-100);
    }
  }
}
